<template>

  <div style="display: flex; flex-direction: column; align-items: center;">
    <el-table :data="tableData" >
      <el-table-column prop="textbookId" label="教材Id">
      </el-table-column>

      <el-table-column prop="supplierId" label="供应商">
      </el-table-column>
      <el-table-column prop="cost" label="成本价">
      </el-table-column>
      <el-table-column prop="buyNum" label="购买数量">
      </el-table-column>
    </el-table>



    <el-pagination
        :page-size="pageSize"
        :pager-count="pageNum"
        :total="totalCount"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
    >
    </el-pagination>

    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="GetSupplier" style="background-color: green; border-color: green;">查看供货商</el-button>
      </el-form-item>
    </el-form>
    <!--    编辑-->
    <el-dialog
        title="供货商详情"
        :visible="dialogVisible"
        @close="dialogVisible = false">
      <el-table :data="detailData" >
        <el-table-column prop="supplierId" label="供货商Id" width="140">
        </el-table-column>
        <el-table-column prop="textbookId" label="教材Id" width="120">
        </el-table-column>
        <el-table-column prop="cost" label="单价">
        </el-table-column>
        <el-table-column prop="supplyNum" label="供货数量">
        </el-table-column>
      </el-table>
      <el-pagination
          :page-size="pageSize"
          :pager-count="pageNum"
          :total="detailCount"
          layout="total, prev, pager, next, jumper"
          @current-change="DetailHandleCurrentChange"
      >
      </el-pagination>
    </el-dialog>

  </div>
</template>

<script>
import request from "@/utils/request";
import {Message} from "element-ui";

export default {
  data() {
    return {
      pageSize: 13,
      pageNum: 1,
      totalCount: 0,
      tableData: [],
      detailCount: 0,
      detailData: [],


      dialogVisible: false, // 控制弹窗显示隐藏
    }
  },

  mounted() {
    this.GetBuyBook();
  },
  methods: {

    GetBuyBook() {

      const GetBuyBookRequest = {

        pageNum:this.pageNum,
        pageSize:this.pageSize,

      }
      request.post("/buyBook/query", GetBuyBookRequest)
          .then(res => {
            console.log(res.data);

            this.tableData = res.data.data.list;
            this.totalCount = res.data.data.totalCount;

          })
          .catch(error => {
            console.error("Error fetching data:", error);
          });
    },
    GetSupplier() {
      this.dialogVisible = true;


      const GetSupplierRequest = {

        pageNum:this.pageNum,
        pageSize:this.pageSize,

      }
      request.post("/supplier/queryAll", GetSupplierRequest)
          .then(res => {
            console.log(res.data);
            this.detailData = res.data.data.list;
            console.log(this.detailData);
            this.detailCount = res.data.data.totalCount;

          })
          .catch(error => {
            console.error("Error fetching data:", error);
          });
    },



    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.GetAccessDepart();
    },

    DetailHandleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.GetDepartText();
    },

  }
};
</script>
